<template>
  <div class="choose">
    <div class="menu4">
      <img src="@/assets/images/组 2560.png" /> <span><b>任务大厅</b></span>
    </div>
    <div class="head">
      <div style="padding-top: 12px; font-size: 14px">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任务级别：</span
        ><span>&nbsp;&nbsp;&nbsp;不限&nbsp;&nbsp;&nbsp;</span
        ><span>电子信息&nbsp;&nbsp;</span>
        <span style="background: skyblue; color: white; border-radius: 2px"
          >&nbsp;先进制造与自动化&nbsp;</span
        ><span>&nbsp;&nbsp;航天航空&nbsp;&nbsp;&nbsp;</span
        ><span>生物与新医药&nbsp;&nbsp;&nbsp;</span>
        <span>新材料&nbsp;&nbsp;&nbsp;</span
        ><span>新能源与节能&nbsp;&nbsp;&nbsp;</span>
        <span>高新技术服务&nbsp;&nbsp;&nbsp;</span
        ><span>建筑业&nbsp;&nbsp;&nbsp;</span>
        <span>现代农业&nbsp;&nbsp;&nbsp;</span
        ><span>资源与环境&nbsp;&nbsp;&nbsp;</span>
      </div>
      <hr style="margin-top: 15px; border: 0.5px dashed #d8dce3" />
      <div style="padding-top: 12px; font-size: 14px">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时限要求：</span
        ><span>&nbsp;&nbsp;&nbsp;不限&nbsp;&nbsp;</span
        ><span style="background: skyblue; color: white; border-radius: 2px">
          &nbsp;湖北 &nbsp;</span
        >
        <span>&nbsp;&nbsp;湖南&nbsp;&nbsp;&nbsp;</span
        ><span>江西&nbsp;&nbsp;&nbsp;</span>
      </div>

      <hr style="margin-top: 17px; border: 0.5px dashed #d8dce3" />
      <div style="padding-top: 12px; font-size: 14px">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任务奖励：&nbsp;&nbsp;</span
        ><span style="background: skyblue; color: white; border-radius: 2px"
          >&nbsp;不限&nbsp;</span
        ><span>&nbsp;&nbsp;信息传输&nbsp;&nbsp;&nbsp;</span>
        <span>计算及服务&nbsp;&nbsp;&nbsp;</span
        ><span>交通运输&nbsp;&nbsp;&nbsp;</span>
        <span>仓储和邮政业&nbsp;&nbsp;&nbsp;</span
        ><span>建筑业&nbsp;&nbsp;&nbsp;</span>
        <span>制造业&nbsp;&nbsp;&nbsp;</span
        ><span>电力、燃气及水的生产供应&nbsp;&nbsp;&nbsp;</span>
        <span>采矿业&nbsp;&nbsp;&nbsp;</span
        ><span>国际组织&nbsp;&nbsp;&nbsp;</span>
        <span>高新技术服务&nbsp;&nbsp;&nbsp;</span
        ><span>农、林、牧、渔业&nbsp;&nbsp;&nbsp;</span>
      </div>
    </div>
    <div class="table1">
      <el-table :data="tableData" class="tableBox0" style="width: 100%">
        <el-table-column prop="numbering" label="任务编号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="任务名称" width="210">
        </el-table-column>
        <el-table-column prop="reward" label="任务奖励" width="200">
        </el-table-column>
        <el-table-column prop="level" label="任务级别" width="195">
          <el-link type="success">普通</el-link>
        </el-table-column>
        <el-table-column prop="time" label="任务时限" width="195">
        </el-table-column>
        <el-table-column prop="date" label="任务截止时间(任务提交时间)">
        </el-table-column>
      </el-table>
    </div>
    <!-- +++++++++++++++++++分页+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++= -->
    <div class="pag">
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    gosh() {
      this.$router.push("/rwsh");
    },
  },
  data() {
    return {
      tableData: [
        {
          numbering: "0123456789",
          name: "任务名称",
          reward: "1,000",
          level: "普通",
          time: "3天",
          date: "2016-05-01",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "一般",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "复杂",
          time: "",
          date: "",
        },
        {
          numbering: "",
          name: "",
          reward: "",
          level: "困难",
          time: "",
          date: "",
        },

        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },

        {
          numbering: "",
          name: "",
          reward: "",
          level: "",
          time: "",
          date: "",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.tableBox0 {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}

.choose {
  width: 1250px;
  height: 660px;
  background-color: white;
  /* padding-top: 50px; */
}
.head {
  width: 1190px;
  height: 150px;
  background-color: white;
  border: #d8dce3 solid 1px;
  position: absolute;
  top: 130px;
  left: 235.25px;
  border-radius: 2px;
}
.table1 {
  width: 1190px;
  height: 320px;
  background-color: white;
  // border: #D8DCE3 solid 1px;
  position: absolute;
  top: 300px;
  left: 235.25px;
  border-radius: 2px;
}
.menu4 img {
  /* background: white; */
  //   padding-top: 5%;
  width: 30px;
  height: 30px;
  display: inline-block;
  // float: left;
  margin-top: 10px;
  margin-left: 2%;
}
.menu4 span {
  position: absolute;
  top: 92px;
  left: 292px;
  // padding-top: 20px;

  // margin-left: 10px;
}
.pag {
  /* margin-top: 4%; */
  /* margin-left: 25%; */
  position: absolute;
  top: 680px;
  left: 531px;
}
</style>